<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-button type="primary" @click="add">添加分类</el-button>
        <!-- 添加弹出框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="分类名称" prop="cat_name">
              <el-input
                type="cat_name"
                v-model="ruleForm.cat_name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择分类">
              <template slot-scope="{}">
                <el-cascader
                  style="width: 100%"
                  v-model="value"
                  :options="options"
                  :props="{
                    //expandTrigger: 'hover',//移上去展开
                    checkStrictly: true,
                    label: 'cat_name',
                    value: 'cat_id',
                  }"
                  @change="handleChange"
                ></el-cascader>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 渲染 -->
        <zk-table
          class="treeTable"
          :data="list"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          show-index
          border
          :show-row-hover="false"
        >
          <!--是否有效-->
          <template slot="isok" slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.cat_deleted === false"
              style="color: lightgreen"
            ></i>
            <i class="el-icon-error" v-else style="color: lightgreen"></i>
          </template>
          <!--排序-->
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag
              type="success"
              size="mini"
              v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag type="warning" size="mini" v-else>三级</el-tag>
          </template>
          <!--操作-->
          <template slot="opt" slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="bj(scope.row.cat_id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.cat_id)"
              >删除</el-button
            >
          </template>
        </zk-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <!-- 编辑tck -->
        <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%">
          <el-form
            :model="editForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- <el-form-item label="当前分类名称"> </el-form-item> -->
            <el-form-item label="修改名称" prop="cat_name">
              <el-input
                type="text"
                v-model="editForm.cat_name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="edituser('ruleForm')"
                >提交</el-button
              >
              <el-button @click="reseteditForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { getcategoriesApi, addApi, delcate, cate, bjcate } from '@/api/goods'
import { LoginApi } from '@/api/user'
export default {
  name: 'categories',
  data () {
    return {
      list: [],
      total: 0,
      columns: [
        { label: '分类名称', prop: 'cat_name', },
        {
          label: '是否有效',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'isok',
        },
        {
          label: '排序',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'order',
        },
        {
          label: '操作',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'opt',
        },
      ],
      obj: {
        pagenum: 5,
        pagesize: 5
      },
      dialogVisible: false,
      dialogVisible1: false,
      options: [],
      value: [],
      ruleForm: {
        cat_name: '',
        cat_level: 0,
        cat_pid: 0
      },
      rules: {
        cat_name: [
          { required: true, message: '用户名不能为空', trigger: 'blur', }
        ]
      },
      editForm: {
        cat_name: ''
      },
      // editForm1: {}


    }
  },
  async created () {
    const res = await this.getcategories()
    // this.list = res.data
  },
  computed: {

  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await addApi(this.ruleForm)
          this.getcategories()
          this.dialogVisible = false
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },

    async getcategories () {
      const res = await getcategoriesApi(this.obj)
      console.log(res, 909090909)
      this.list = res.data.result
      this.total = res.data.total

    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.obj.pagesize = val
      this.getcategories()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.obj.pagenum = val
      this.getcategories()
    },
    async add () {
      this.dialogVisible = true
      const res = await getcategoriesApi()
      // console.log(res)
      this.options = res.data
    },
    handleChange (value) {
      console.log(value, 909090)
      this.ruleForm.cat_pid = value[value.length - 1]
      this.ruleForm.cat_level = value.length
    },
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delcate(id)
        this.getcategories()
        this.$message({
          type: 'success',
          message: '删除成功!'

        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取编辑分类
    async bj (id) {
      this.dialogVisible1 = true
      const res = await cate(id)
      console.log(res, 88889999)

      this.editForm = res.data
    },
    //编辑
    edituser (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await bjcate(this.editForm)
          this.getcategories()
          this.dialogVisible1 = false
          this.$message.success('修改成功')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    reseteditForm (formName) {
      this.$refs[formName].resetFields();
    }
  },

}
</script>
<style lang='scss'  scoped>
</style>
